<!--
 * @Description: 首页组件
 -->
<template>
  <div class="home" id="home" name="home">
    <!-- 轮播图 -->
    <div class="block">
      <el-carousel height="460px">
        <el-carousel-item v-for="item in carousel" :key="item.carousel_id">
          <img style="height:460px;margin-left:5.5%" :src="item.image" :alt="item.describes" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 轮播图END -->
    <div class="main-box">
      <div class="main">
        <!-- 手机商品展示区域 -->
        <div class="phone">
          <div class="box-hd">
            <div class="title">课程</div>
          </div>
          <div class="box-bd">

            <div class="list">
              <MyList :list="phoneList" :isMore="true"></MyList>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      carousel: "", // 
      phoneList: "", // 
      miTvList: "", // 
      applianceList: "", // 
      applianceHotList: "", //
      accessoryList: "", //
      accessoryHotList: "", //
      protectingShellList: "", // 
      chargerList: "", //
      applianceActive: 1, // 
      accessoryActive: 1 // 
    };
  },
  created() {
    // 获取轮播图数据
    this.$axios
      .get("/api/course/banner")
      .then(res => {
        this.carousel = res.data.data
      })
      .catch(err => {
        return Promise.reject(err);
      });
    this.getPromo();
  },
  methods: {
    // 获取各类商品数据方法封装
    getPromo( ) {
      this.$axios
        .get("api/course/index")
        .then(res => {
          this.phoneList = res.data.data
      
        })
        .catch(err => {
          return Promise.reject(err);
        });
    }
    // getPromo(categoryName, val, api) {
    //   api = api != undefined ? api : "/api/product/getPromoProduct";
    //   this.$axios
    //     .post(api, {
    //       categoryName
    //     })
    //     .then(res => {
    //       this[val] = res.data.Product;
    //     })
    //     .catch(err => {
    //       return Promise.reject(err);
    //     });
    // }

  }
};
</script>
<style scoped>
@import "../assets/css/index.css";
</style>